import React,{useRef,useState,forwardRef,useImperativeHandle} from "react";
import {Button,Image} from 'antd'
import LlxTable from 'components/LlxTable'
import LlxPlay from 'components/LlxPlay'
import {SortableHandle } from 'react-sortable-hoc';
import { MenuOutlined } from '@ant-design/icons';
import AddWord from 'components/LlxPushData/word'
import RelacePhoto from "components/LlxPushData/replacePhoto";
import {getWordInfoPublish} from 'api/index'
const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);

const StudyWord = forwardRef((props, ref) => {
  
  const {form,disabled,dictionaries,userName,typeName} = props
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [isModalVisiblePhoto, setIsModalVisiblePhoto] = useState(false)
  const [pictureList,setPictureList] =useState([])
  const wordId = useRef(null)


  useImperativeHandle(ref, () => ({
    dataSource
  }));

  //选择数据
const [selectedRowKeys,setselectedRowKeys] = useState([])
const [dataSource,setDataSource] = useState(form.getFieldValue()[typeName]?.map((i,index)=>{
  return {
    id:i.id,
    wordId:i.wordId,
    flowVideoId:i.flowVideoId,
    sort:i.sort || index + 1,
    wordName:i.wdWord.wordName,
    pofName:i.wdWord.pofName,
    chineseExplain:i.wdWord.chineseExplain,
    audioUrl:i.wdWord.audioUrl,
    picture:i.picture,
    key:index + 1 +''
  }
}))
const rowSelection  = useRef({
  selectedRowKeys: selectedRowKeys,
  onChange: value => {
  setselectedRowKeys(value)
  rowSelection.current.selectedRowKeys = value
  }
})
  
//表头配置信息
const columns = [
      {
        title: '排序',
        dataIndex: 'sort',
        width: 100,
        key: 'key', 
        className: 'drag-visible',
        align: 'center',
        render: () => <DragHandle />,
      },
      {title: '序号', dataIndex: 'sort', key: 'sort', align: 'center',width:100},
      {title: '单词', dataIndex: 'wordName', key: 'wordName', align: 'center',render: (text, record) => {
        return <div className="operate_link_group text-nowrap text-color-green">
          {text}
       </div>
     }},
      {title: '词性', dataIndex: 'pofName', key: 'pofName', align: 'center'},
      {title: '中文', dataIndex: 'chineseExplain', key: 'chineseExplain', align: 'center'},
      {title: '音频', dataIndex: 'audioUrl', key: 'audioUrl', align: 'center',render:(text)=>{
        return text?<LlxPlay audioUrl={text}></LlxPlay>:'无音频'
      }},
      {title: '图片',width:'30%',dataIndex: 'pictureUrl', key: 'pictureUrl', align: 'center',render: (text, record) => {
        return <div className="operate_link_group">
          {
            record.picture?
              record.picture.map((i,j)=>{
                return <>
                 <Image
                style={{marginLeft:'-5px'}}
                width={60}
                src={i}
                key={j}
              />
              &nbsp;
                </>
              })
            :''
          }
         {
           disabled?'':<span className="text-link" onClick={()=>editPhoto(record)}>
           修改
         </span>
         }
       </div>
     }}
]

// 删除单词
const delWords = () => {
  setDataSource(value=>value.filter((i,j)=>!selectedRowKeys.includes(i.sort)))
}
// 修改图片
const editPhoto = async(value) => {
  
  wordId.current = value.wordId

  const res = await getWordInfoPublish(value.wordId)
  
  const data = res.result.pictures || []

  data.forEach(i=>{
    
    if(value.picture.includes(i.pictureUrl)){
      i.checked=true
    } else {
      i.checked=false
    }
  })

  setPictureList(res.result.pictures)
  setIsModalVisiblePhoto(true)
}
// 所有选中的单词
const setSelectWords = (data) => {
  setDataSource(value=>[...value,...data.map((i,index)=>{
    return {
    wordId:i.id,
    flowVideoId:window.location.href.slice(window.location.href.indexOf('id=')+3),
    sort:value.length+index+1,
    wordName:i.wordName,
    pofName:i.pofName,
    chineseExplain:i.chineseExplain,
    audioUrl:i.audioUrl,
    picture:[i.wdWordPictures[0].pictureUrl],
    key:value.length+index+1+''
  }
  })])
setIsModalVisible(false)
}
// 获取所有选单词
const getSelectPhoto = (value) => {
const data = dataSource
data.filter(i=>i.wordId===wordId.current)[0].picture=value
setDataSource(value=>data)
}

  
  return <>
    <div  style={{marginBottom:'20px'}}>
    <Button disabled={disabled} type={'primary'} onClick={()=>setIsModalVisible(true)}>添加新的单词</Button>    
    <Button disabled={!selectedRowKeys.length||disabled} type={'primary'} danger onClick={delWords} style={{marginLeft:'20px'}}>移除单词</Button>    
  </div>

  <div>
     <LlxTable
           selectedRowShow={!disabled}
           rowSelection={rowSelection.current}
           height={300}
           components={true}
           paginationHide={true}
           setDataSource={setDataSource}
           columns={columns}
           dataSource={dataSource}/>
  </div>

  <RelacePhoto getSelectPhoto={getSelectPhoto} data={pictureList} isModalVisible={isModalVisiblePhoto} setIsModalVisible={setIsModalVisiblePhoto}></RelacePhoto>

  <AddWord dictionaries={dictionaries} userName={userName} setSelectWords={setSelectWords}  multipleType={true} setIsModalVisible={setIsModalVisible} title={'学习视频学习单词添加'} isModalVisible={isModalVisible}></AddWord>

  </>
})

export default StudyWord